<template>
  <div class="nav">
    <li
      v-for="(item, index) in navList"
      :key="index"
      @click="changeStatus(index)"
      :class="item.status == true ? 'active' : ''"
    >
      {{ item.message }}
    </li>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oldClick: 0,
      navList: [
        { message: "推荐", status: true },
        { message: "歌手", status: false },
        { message: "排行", status: false },
        { message: "搜索", status: false },
      ],
    };
  },
  methods: {
    changeStatus(index) {
      this.navList[this.oldClick].status = false;
      this.oldClick = index;
      this.navList[index].status = true;
      let val = this.navList[index].message;
      this.$emit("changeVal", val);
    },
  },
};
</script>
<style>
.nav {
  list-style: none;
  display: flex;
  background: #222222;
  height: 50px;
  justify-content: space-around;
}
li {
  line-height: 50px;
  color: gray;
}
.active {
  color: gold;
}
</style>
